<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar :title="storeName" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view ref="myStore">
            <view class="mst-top">
                <u-swiper :list="storeBanner"></u-swiper>
            </view>
            <view class="mst-bot">
                <view class='coreshop-grid'>
                    <view class='coreshop-item'>
                        <image class='coreshop-item-img' :src='storeLogo'></image>
                    </view>
                    <view class='coreshop-item'>
                        <view class="coreshop-font-xl">{{totalGoods}}</view>
                        <text class='coreshop-item-text'>全部宝贝</text>
                    </view>
                    <!-- #ifdef MP-TOUTIAO -->
                    <view class='coreshop-item' @click="$u.throttle(createPoster, 500)">
                        <u-icon name="star" size="18" labelSize="14" label="分享店铺" labelPos="bottom" space="10"></u-icon>
                    </view>
                    <!-- #endif -->
                    <!-- #ifndef MP-TOUTIAO -->
                   <!-- <view class='coreshop-item' @click="openPopup()">
                        <u-icon name="star" size="18" labelSize="14" label="收藏本店" labelPos="bottom" space="10"></u-icon>
                    </view> -->
					<view class='coreshop-item'>
						<u-icon name="star-fill" :size="18" label="收藏本店" :labelSize="14" labelPos="bottom" space="10" @click="collection" v-if="isfav"></u-icon>
					    <u-icon name="star" size="18" labelSize="14" label="收藏本店" labelPos="bottom" space="10" @click="collection" v-else></u-icon>
					 </view> 
                    <!-- #endif -->
                    <!-- #ifndef MP-WEIXIN -->
                    <view class='coreshop-item' @click="$u.throttle(createPoster, 500)">
                        <u-icon name="grid" size="18" labelSize="14" label="二维码" labelPos="bottom" space="10"></u-icon>
                    </view>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <view class='coreshop-item' @click="$u.throttle(createPoster, 500)">
                        <u-icon name="grid" size="18" labelSize="14" label="二维码" labelPos="bottom" space="10"></u-icon>
                    </view>
                    <!-- #endif -->
                </view>
            </view>
            <view class="coreshop-padding-15 coreshop-margin-bottom-15 coreshop-bg-white coreshop-solid-bottom">
                <u-search placeholder="请输入关键字搜索" v-model="key" :show-action="true" action-text="搜索" :animation="false" @custom="getGoods()"></u-search>
            </view>
            <!-- 收藏弹出窗 -->
            <u-popup mode="top" :show="lvvpopref" :closeOnClickOverlay="true" @close="lvvpopref = false"> 
                <view class="collect-pop">
                    <!-- #ifdef MP-WEIXIN -->
                    <image src="/static/images/distribution/wxxcx.png" mode="widthFix"></image>
                    <!-- #endif -->  
                </view>
            </u-popup>
        </view>
        <!-- 商品列表 -->
        <view>
            <view class="coreshop-goods-group" v-if="goodsData.length>0">
                <u-grid col="2" :border="false" align="left">
                    <u-grid-item bg-color="transparent" :custom-style="{padding: '0px'}" v-for="(item, index) in goodsData" :key="index" @click="goGoodsDetail(item.id)">
                        <view class="good_box">
                            <u--image :src="item.image"  mode="widthFix" width="100%" height="185" radius="10"></u--image> 
                            <view class="good_title u-line-2">
                                {{item.name}}
                            </view>
                            <view class="good-price">
                                {{item.price}}元 <!-- <span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span> -->
                            </view>
                            <view class="good-tag-recommend" v-if="item.isRecommend">
                                推荐
                            </view>
                            <view class="good-tag-hot" v-if="item.isHot">
                                热门
                            </view>
                        </view>
                    </u-grid-item>
                </u-grid>
            </view>
            <!-- 无数据时默认显示 -->
            <view class="coreshop-emptybox" v-else>
                <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无商品列表" mode="list"></u-empty>
            </view>
        </view>
        <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
		 
		<!-- 登录提示 -->
		<coreshop-login-modal :value="shareType"></coreshop-login-modal>
    </view> 
</template>
<script>
      import { mapState } from 'vuex';

    export default { 
        data() {
            return {
				shareType:'',
                goodsData: [],
                status: 'loadmore',
                iconType: 'flower',
                loadText: {
                    loadmore: '轻轻上拉',
                    loading: '努力加载中',
                    nomore: '实在没有了'
                },
                orderItems: [{
                    name: '全部宝贝',
                    nums: '115'
                },
                {
                    name: '收藏本店',
                    icon: '/static/images/ic-me-collect.png',
                },
                {
                    name: '二维码',
                    icon: '/static/images/qr_code.png',
                }
                ],
                storeCode: '',
                storeName: '', //店铺名称
                storeLogo: '',
                store_banner: '',
                storeDesc: '', //店铺介绍
                storeBanner: [],
                totalGoods: 0,
                page: 1, //默认页码
                searchKey: '请输入关键字搜索',
                shareUrl: this.$globalConstVars.shareUrl,
                lvvpopref: false,
				isfav: false, // 是否收藏
				shopId:'',//当前店铺
				 key: '',
				searchData: {
				    where: {},
				    limit: 10,
				    page: 1,
				    order: {
				        key: 'sort',
				        sort: 'asc'
				    }
				},
            }
        },
        computed: {
			...mapState({
				hasLogin: state => state.hasLogin
			})
		},
		onShow: function () {
            if (this.$store.state.config.dealerStore == '2') {
                //跳转到首页
                this.$u.route({
                    type: 'switchTab',
                    url: '/pages/index/default/default'
                });
            }
        },
        //加载执行
        onLoad: function (options) { 
            let store = options.store;
            this.storeCode = store;
			this.shareType=options.shareType;
			//扫码授权
			if(!this.hasLogin && this.shareType=='Dealer'){
				this.$store.commit('showLoginTip', true);
			}
			
            this.getDealer(store);
            this.getGoods();
        },
        methods: {
            // 显示modal弹出框
            openPopup() {
                this.lvvpopref = true;
            },
            // 关闭modal弹出框
            closePopup() {
                this.lvvpopref = false;
            },
            //去搜索
            goSearch() { 
                this.getGoods();
            },
			// 统一返回筛选条件 查询条件 分页
			conditions() {
				var where = {};
				if(this.key != ''){
					where = {
					    searchName: this.key
					};
				}
				this.searchData.where = where;
			    let data = this.searchData;
			    var newData = this.$u.deepClone(data);
			    if (data.where) {
			        newData.where = JSON.stringify(data.where);
			    }
			    //把排序换成字符串
			    if (data.order) {
			        var sort = data.order.key + ' ' + data.order.sort;
			        if (data.order.key != 'sort') {
			            sort = sort + ',sort asc'; //如果不是综合排序，增加上第二个排序优先级排序
			        }
			        newData.order = sort;
			    } else {
			        newData.order = 'sort asc';
			    }
			    return newData;
			},
            //取得商品数据
            getGoods: function () {
                this.status = 'loading'
                this.$u.api.getDealerGoodsPageList(this.conditions()).then(res => {
                    if (res.status) {
                        this.totalGoods = res.data.totalCount;
                        if (this.page >= res.data.totalPages) {
                            // 没有数据了
                            this.status = 'nomore'
                        } else {
                            // 未加载完毕
                            this.status = 'loadmore'
                            this.page++
                        } 
						this.goodsData= [];
                        this.goodsData = [...this.goodsData, ...res.data.list]
                    } else {
                        this.$u.toast(res.msg)
                    }
                }); 
            },
            //获取销售商信息
            getDealer: function (store) {
                let _this = this;
                _this.$u.api.getDealerStoreInfo({
                    id: store
                }).then(res => {
                    if (res.status) {
                        _this.storeName = res.data.storeName ? res.data.storeName : "我的店铺";
                        _this.storeDesc = res.data.storeDesc;
                        _this.storeLogo = res.data.storeLogo ? res.data.storeLogo : '/static/images/common/empty.png';
						_this.shopId=res.data.id;
						_this.isfav=res.data.isfav;
						
                        if (res.data.storeBanner) {
                            _this.storeBanner = res.data.storeBanner.split(',');
                        } else {
                            _this.storeBanner.push('/static/images/common/empty-banner.png');
                        }

                        //_this.totalGoods = res.data.totalGoods;
                        uni.setNavigationBarTitle({
                            title: _this.storeName
                        });
                    } else {
                        //报错了
                        _this.$u.toast(res.msg);
                    }
                });
            },
            // 生成邀请海报
            createPoster() {
                let data = {
                    client: this.$globalConstVars.shareClient.wxMiNiProgram,
                    url: this.$globalConstVars.shareUrl,
                    type: this.$globalConstVars.shareModel.poster,
                    page: this.$globalConstVars.shareType.dealer,
                    params: {
                        store: this.storeCode
                    },
                    
                }
                let userToken = this.$db.get('userToken')
                if (userToken && userToken != '') {
                    data.token = userToken
                }
                this.$u.api.share(data).then(res => {
                    if (res.status) {
                        data.params.posterUrl = res.data;
                        data.params.shareType = this.$globalConstVars.shareType.dealer;
                        this.$u.route('/pages/share/shareNewPoster/shareNewPoster' + uni.$u.queryParams(data.params))
                    } else {
                        this.$u.toast(res.msg)
                    }
                })
            },
            //获取分享URL
            getShareUrl() {
                let data = {
                    client: this.$globalConstVars.shareClient.wxMiNiProgram,
                    url: this.$globalConstVars.shareUrl,
                    type: this.$globalConstVars.shareModel.url,
                    page: this.$globalConstVars.shareType.dealer,
                    params: {
                        store: this.storeCode
                    }
                };
                let userToken = this.$db.get('userToken');
                if (userToken && userToken != '') {
                    data.token = userToken
                }
                this.$u.api.share(data).then(res => {
                    this.shareUrl = res.data
                });
            },
			// 收藏/取消
			collection() {
			    let data = {
			        id: this.shopId,
					data:"店铺收藏"
			    }
			    this.$u.api.goodsCollection(data).then(res => {
			        if (res.status) {
			            this.isfav = !this.isfav;
			            this.$refs.uToast.show({ message: res.msg, type: 'success', back: false });
			        } else {
			            this.$u.toast(res.msg);
			        }
			    })
			}
        },
        watch: {
            storeCode: {
                handler() {
                    this.getShareUrl();
                },
                deep: true
            }
        },
        //上拉加载
        onReachBottom() {
            if (this.status === 'loadmore') {
                this.getGoods();
            }
        },
        //分享
        onShareAppMessage(res) {
            return {
                title: this.storeName ? this.storeName : this.$store.state.config.shareTitle,
                imageUrl: this.storeLogo ? this.storeLogo : this.$store.state.config.shareImage,
                path: this.shareUrl
            }
        },
        onShareTimeline(res) {
            return {
                title: this.storeName ? this.storeName : this.$store.state.config.shareTitle,
                imageUrl: this.storeLogo ? this.storeLogo : this.$store.state.config.shareImage,
                path: this.shareUrl
            }
        },
    }
</script>
<style lang="scss" scoped>
    @import "myStore.scss";
</style>